import Layout from './Layout'
import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import Search from './Search'
import { Col, Row, Typography } from 'antd'
import ProductItem from './ProductItem'
import { getProduct } from '../../store/actions/product.action'
import { useSelector } from '../../hooks/useSelector'

const { Title } = Typography;

const Home = () => {
  const dispatch = useDispatch()

  const { createdAt, sold } = useSelector(state=> state.product)
  
  useEffect(()=>{
    dispatch(getProduct('createdAt'))
    dispatch(getProduct('sold'))
  },[])
  return (
    <Layout title='商城' subTitle='尽情享受吧'>
      <Search/>
      <Title level={5}>最新上架</Title>
      <Row gutter={[16,16]}>
        {
          createdAt.products.map(item => (
            <Col span={6} key={ item._id }>
              <ProductItem product={item} />
            </Col>
          ))
        }
        
      </Row>
      <Title level={5}>最受欢迎</Title>
      <Row gutter={[16,16]}>
        {
          sold.products.map(item=> (
            <Col span={6} key={ item._id }>
              <ProductItem  product={item}/>
            </Col>
          ))
        }
        
      </Row>
    </Layout>
  )
}

export default Home